<!DOCTYPE html>
<html>
<head>
	<title>芭蕉花管理平台-首页</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="SHORTCUT ICON" href="/img/favicon.ico">
	<script type="text/javascript">
		var pathname = window.location.pathname;
		if (pathname != "/mobile/home.html") {
			location.href = '/';
		}
	</script>
	<link rel="stylesheet" type="text/css" href="/mobile/css/AdminLTE.min.css">
	<script type="text/javascript" src="/mobile/js/adminlte.min.js"></script>
	<script type="text/javascript" src="/mobile/js/plugin/highcharts/highcharts.js"></script>
	<script type="text/javascript" src="/mobile/js/plugin/highcharts/exporting.js"></script>
	<script type="text/javascript" src="/mobile/js/plugin/highcharts/oldie.js"></script>
	<script type="text/javascript" src="/mobile/js/plugin/highcharts/series-label.js"></script>
	<script type="text/javascript" src="/mobile/js/plugin/highcharts/highcharts-zh_CN.js"></script>
</head>
<body>
<div class="content">
	<!-- Main content -->
	<section class="content">
		<!-- Small boxes (Stat box) -->
		<div class="row">
			<div class="col-lg-4 col-sm-6">
				<!-- small box -->
				<div class="small-box bg-teal-gradient">
					<div class="inner">
						<h3 id="totalMoneyPool" style="min-height: 32px; font-size: 32px;"></h3>
						<p>红包奖池总金额</p>
					</div>
					<div class="icon">
						<!--<i class="ion ion-bag"></i>-->
					</div>
					<a href="#" onclick="getHtml('/mobile/pages/dataStatist/redPagLogList.html');return false;" class="small-box-footer">查看详情<i class="fa fa-arrow-circle-right"></i></a>
				</div>
			</div>

			<div class="col-lg-4 col-sm-6">
				<!-- small box -->
				<div class="small-box bg-aqua">
					<div class="inner">
						<h3 id="totalRedPag" style="min-height: 32px; font-size: 32px;"></h3>
						<p>全民红包参与总次数</p>
					</div>
					<div class="icon">
						<!--<i class="ion ion-bag"></i>-->
					</div>
					<a href="#" onclick="getHtml('/mobile/pages/dataStatist/redPagLogList.html');return false;" class="small-box-footer">查看详情<i class="fa fa-arrow-circle-right"></i></a>
				</div>
			</div>
			<!-- ./col -->
			<div class="col-lg-4 col-sm-6">
				<!-- small box -->
				<div class="small-box bg-green">
					<div class="inner">
						<h3 id="totalBigWheel" style="min-height: 32px; font-size: 32px;"><sup style="font-size: 20px"></sup></h3>
						<p>大转盘参与总次数</p>
					</div>
					<div class="icon">
						<!--<i class="ion ion-stats-bars"></i>-->
					</div>
					<a href="#" onclick="getHtml('/mobile/pages/dataStatist/bigWheelLogList.html');return false;" class="small-box-footer">查看详情<i class="fa fa-arrow-circle-right"></i></a>
				</div>
			</div>
			<!-- ./col -->
			<div class="col-lg-4 col-sm-6">
				<!-- small box -->
				<div class="small-box bg-yellow">
					<div class="inner">
						<h3 id="totalPoint" style="min-height: 32px; font-size: 32px;"></h3>
						<p>抽取总积分</p>
					</div>
					<div class="icon">
						<!--<i class="ion ion-person-add"></i>-->
					</div>
					<a href="#" onclick="getHtml('/mobile/pages/dataStatist/bigWheelLogList.html', {htmlParams : [{'key' : 'searchType', 'value' : 3}]});return false;" class="small-box-footer">查看详情<i class="fa fa-arrow-circle-right"></i></a>
				</div>
			</div>
			<!-- ./col -->
			<div class="col-lg-4 col-sm-6">
				<!-- small box -->
				<div class="small-box bg-red">
					<div class="inner">
						<h3 id="totalMoney" style="min-height: 32px; font-size: 32px;"></h3>
						<p>抽取红包总金额</p>
					</div>
					<div class="icon">
						<!--<i class="ion ion-pie-graph"></i>-->
					</div>
					<a href="#" onclick="getHtml('/mobile/pages/dataStatist/redPagLogList.html');return false;" class="small-box-footer">查看详情<i class="fa fa-arrow-circle-right"></i></a>
				</div>
			</div>
		</div>

		<!--数据报表展示-->
		<div class="row">
			<div class="col-lg-12">
				<div class="box box-primary">
					<div class="box-header with-border">
						<h3 class="box-title">全名红包</h3>

						<div class="box-tools pull-right">
							<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
							</button>
							<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
						</div>
					</div>
					<div class="box-body chart-responsive">
						<div class="chart" id="redPageChart" style="height: 500px;"></div>
					</div>
				</div>

			</div>

			<div class="col-lg-12">
				<!-- LINE CHART -->
				<div class="box box-danger">
					<div class="box-header with-border">
						<h3 class="box-title">幸运大转盘</h3>

						<div class="box-tools pull-right">
							<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
							</button>
							<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
						</div>
					</div>
					<div class="box-body chart-responsive">
						<div class="chart" id="bigWheelChart" style="height: 500px;"></div>
					</div>
				</div>

			</div>
		</div>

	</section>
</div>
</body>
<script type="text/javascript">
	//初始化数据
	$(function () {
		getDataTotal();
		redPageData();
		bigWheelData();
		getRedpagPoolMoney();
		//interval();
	});

	//设置定时器刷新
	function interval() {
		// 设置定时器, 30秒刷新一次
		setInterval(function() {
			getDataTotal();
			redPageData();
			bigWheelData();
			getRedpagPoolMoney();
		}, 30000);
	}
	//获取红包池总金额
	function getRedpagPoolMoney() {
		$.ajax({
			type: "POST",
			url: "/sysconfig/getTotalPoolMoney",
			async: true,//默认就是true
			success: function (result) {
					$("#totalMoneyPool").html((result).toFixed(2)+"<font size='5px'>元</font>");
			},
			failure: function (result) {
				layer.msg('网络错误！');
			},
		});
	}
	//统计总数量
	function getDataTotal() {
		$.ajax({
			type:"POST",
			url:"/dataStatist/getDataTotal",
			async : true,//默认就是true
			dataType:"json",
			success:function(result){
				if(!result.error){
					var data = result.data;
					$("#totalRedPag").html(data.totalRedPag+"<font size='5px'>次</font>");
					$("#totalBigWheel").html(data.totalBigWheel+"<font size='5px'>次</font>");
					$("#totalPoint").html(data.totalPoint+"<font size='5px'>积分</font>");
					$("#totalMoney").html((data.totalMoney).toFixed(2)+"<font size='5px'>元</font>");
				}
			},
			failure:function(result) {
				alert('网络错误！');
			},
		});
	}

	//全名红包请求后台数据
	function redPageData() {
		var ydata = [];
		var xdata = [];
		$.ajax({
			type:"POST",
			url:"/dataStatist/getRedPagData",
			async : true,//默认就是true
			dataType:"json",
			success:function(result){
				for(var i=0;i<result.length;i++){
					ydata.push(result[i].count);
					xdata.push(result[i].goods);
				}
				showRedPagData(xdata,ydata);
			},
			failure:function(result) {
				alert('网络错误！');
			},
		});
	}

	//红包数据展示
	function showRedPagData(xdata,ydata) {
		var chart = Highcharts.chart('redPageChart', {
			title: {
				text: '全名红包以抢金额情况'
			},
			xAxis: {
				categories : xdata
			},
			yAxis: {
				title: {
					text: '已抢次数'
				}
			},
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'middle'
			},

			series: [{
				name: '次数',
				data: ydata
			}]
		});
	}

	//幸运大转盘请求后台数据
	function bigWheelData() {
		var ydata = [];
		var xdata = [];
		$.ajax({
			type:"POST",
			url:"/dataStatist/getBigWheelData",
			async : true,//默认就是true
			dataType:"json",
			success:function(result){
				for(var i=0;i<result.length;i++){
					ydata.push(result[i].count);
					xdata.push(result[i].goods);
				}
				showBigWheelData(xdata,ydata);
			},
			failure:function(result) {
				alert('网络错误！');
			},
		});
	}

	//显示大转盘数据
	function showBigWheelData(xdata,ydata) {
		var chart = Highcharts.chart('bigWheelChart', {
			title: {
				text: '大转盘中奖情况'
			},
			xAxis: {
				categories : xdata
			},
			yAxis: {
				title: {
					text: '中奖次数'
				}
			},
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'middle'
			},

			series: [{
				name: '次数',
				data: ydata
			}]
		});
	}
</script>
</html>